<script setup lang="ts">
import { ElConfigProvider } from 'element-plus'
import {useConfigStore} from '@/store/config'
import {storeToRefs} from 'pinia'
import { ref, onMounted } from 'vue'
import LoadingScreen from '@/components/LoadingScreen.vue'
import CustomTitleBar from '@/components/common/CustomTitleBar.vue'

let config_store = useConfigStore()
let {language} = storeToRefs(config_store)
import zh from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/es/locale/lang/en'
const lang:any = {zh,en}

// 控制启动动画显示
const showLoading = ref(true)

onMounted(() => {
  // 固定显示5秒钟
  setTimeout(() => {
    showLoading.value = false
  }, 5000)
})

const handleLoadingComplete = () => {
  // 这个函数可以用于处理加载完成事件，但我们使用固定时间
  console.log('Loading animation completed')
}
</script>

<template>
    <!-- 启动动画 -->
    <LoadingScreen 
      v-if="showLoading" 
      @loading-complete="handleLoadingComplete"
    />
    
    <!-- 主应用内容 -->
    <div v-else class="app-container">
        <!-- 自定义标题栏 -->
        <CustomTitleBar />
        
        <!-- 应用主体内容 -->
        <div class="app-content">
            <el-config-provider :locale="lang[language]">
                <router-view v-slot="slot">
                    <keep-alive include="Home">
                        <component :is="slot.Component" />
                    </keep-alive>
                </router-view>
            </el-config-provider>
        </div>
    </div>
</template>

<style>
.app-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.app-content {
  flex: 1;
  overflow: hidden;
}
</style>
